<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th><th>价格</th><th>颜色</th>
    </tr>
</table>
<script>
    let p1={};
    p1.name="战鹰";
    p1.age=28;
    p1.run=function () {
        console.log(this.name+":"+this.age);
    };
    p1.run();
    let p2={name:"柯洁",age:25,run:function () {
        console.log(this.name+":"+this.age);
        }};
    p2.run();
    let product={title:"斯伯丁篮球",price:108,color:"红色"};
    let arr=[
        {title:"斯伯丁篮球",price:108,color:"红色"},
        {title:"威尔逊篮球",price:158,color:"花色"},
        {title:"李宁篮球",price:98,color:"蓝色"}
    ];
    let table=document.querySelector("table");
    for (let p of arr) {
        let tr=document.createElement("tr");
        let titleTd=document.createElement("td");
        let priceTd=document.createElement("td");
        let colorTd=document.createElement("td");
        titleTd.innerText=p.title;
        priceTd.innerText=p.price;
        colorTd.innerText=p.color;
        tr.append(titleTd,priceTd,colorTd);
        table.append(tr);
    };
</script>
</body>
</html>